<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/ros-topic/ros-topic.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">

<dom-module id="map-annotator-pose">
  <template>
    <style>
      :host {
        display: block;
      }
      paper-button {
        background-color: #eee;
      }
    </style>
    <ros-topic
      auto
      id="userActions"
      topic="map_annotator/user_actions"
      ros="{{ros}}"
      msg-type="map_annotator/UserAction"
    ></ros-topic>
    [[poseName]]
    <paper-button on-tap="_handleDelete">Delete</paper-button>
    <paper-button on-tap="_handleGoTo">Go to</paper-button>
  </template>

  <script>
    class MapAnnotatorPose extends Polymer.Element {
      static get is() { return 'map-annotator-pose'; }
      static get properties() {
        return {
          poseName: String,
          ros: Object
        };
      }

      _handleDelete(evt) {
        var msg = {
          command: 'delete',
          name: this.poseName
        };     
        this.$.userActions.publish(msg);
      }

      _handleGoTo(evt) {
        var msg = {
          command: 'goto',
          name: this.poseName
        };     
        this.$.userActions.publish(msg);
      }

    }
    window.customElements.define(MapAnnotatorPose.is, MapAnnotatorPose);
  </script>
</dom-module>
